<template>
  <view class="page">
    <u-sticky :offsetTop="0">
      <view class="head-tabs">
        <view class="tabs-wrap-2">
          <u-tabs
            :current="tabCurrent"
            :scrollable="false"
            :list="tabList"
            @click="tabClick"
            keyName="title"
            lineColor="#CB0011"
            :lineWidth="28"
            :lineHeight="2"
            :itemStyle="{ height: '50px', fontSize: '28rpx', color: '#666666' }"
            :activeStyle="{ fontWeight: 'bold', color: '#000000' }"
            :inactiveStyle="{
              color: '#9695A3',
              fontWeight: '400',
              fontSize: '28rpx',
            }"></u-tabs>
        </view>
      </view>
    </u-sticky>

    <view class="page-ctx">
      <view class="view-wrap">
        <view class="refund-view">
          <view class="order-wrap">
            <view class="order-list">
              <view
                class="item"
                v-for="(item, index) in allow_refund_list"
                :key="index">
                <view class="item-top flex-between">
                  <text class="order-sn">
                    订单号：{{ item.orderNo || item.sn }}
                  </text>
                  <text class="status">{{ item.statusInfo || "" }}</text>
                </view>

                <view class="item-center" @click="toDetail(item)">
                  <view class="products-wrap">
                    <view class="product-list">
                      <view
                        class="product-item flex"
                        v-for="(
                          product_item, product_index
                        ) in item.products_arr">
                        <view class="poster-box">
                          <image :src="product_item.image" mode=""></image>
                        </view>
                        <view class="info">
                          <view class="title-box">
                            <view class="title ellipsis-2">
                              {{ product_item.title }}
                            </view>
                          </view>

                          <view class="desc-box">
                            <view class="desc ellipsis-1">
                              {{ product_item.keyVals }}
                            </view>
                          </view>

                          <view class="price-box flex-between">
                            <view class="price-info">
                              {{ product_item.priceSale || 0 }}
                            </view>
                            <text class="num">x {{ product_item.num }}</text>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="item-bottom">
                  <!-- <view class="total-box ">
										<view class="price">
											合计金额：￥{{item.price}}
										</view>
									</view> -->
                  <view
                    class="btns flex"
                    v-if="
                      item.is_allow_refund ||
                      tabSelect.value == 1 ||
                      tabSelect.value == 2 ||
                      item.ifCancel == 1 ||
                      item.ifExpress == 1 ||
                      item.ifReceive == 1
                    ">
                    <view
                      v-if="tabSelect.value == 1 || tabSelect.value == 2"
                      class="btn fit-text btn-detail"
                      @click="toDetail(item)">
                      服务单详情
                    </view>
                    <view
                      v-if="item.is_allow_refund"
                      class="btn fit-text btn-pay"
                      @click="toRefund(item)">
                      申请售后
                    </view>

                    <view
                      v-if="item.ifCancel == 1"
                      class="btn fit-text btn-pay"
                      @click="doCancel(item)">
                      取消售后
                    </view>
                    <view
                      v-if="item.ifExpress == 1"
                      class="btn fit-text btn-pay"
                      @click="openExpress(item)">
                      邮寄回平台
                    </view>
                    <view
                      v-if="item.ifReceive == 1"
                      class="btn fit-text btn-pay"
                      @click="qrShouHuo(item, index)">
                      确认收货
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="load-more-wrap" style="margin-top: 40rpx">
              <u-loadmore :status="loadmore_status" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <w_bottom_safe height="40" />

    <refund_cancel_pop
      data-title="售后取消"
      ref="refund_cancel_pop"
      @confirm="update_refund_info" />
    <refund_add_express_pop
      data-title="售后退回物流"
      ref="refund_add_express_pop"
      @confirm="confirmExpress" />
  </view>
</template>

<script>
import refund_cancel_pop from "@/components/refund/refund_cancel_pop.vue";
import refund_add_express_pop from "@/components/refund/refund_add_express_pop.vue";
export default {
  components: {
    refund_cancel_pop,
    refund_add_express_pop,
  },
  data() {
    return {
      show_refund: false, //订单 售后切换

      showExpressCompany: false, //填写快递信息
      //
      orders: [],
      order_select: {}, //
      count: 0,
      pagination: {
        page: 1,
        pageNum: 10,
      },
      loadmore_status: "loadmore", //loadmore  / loading / nomore

      // 售后相关
      allow_refund_list: [
        {
          orderNo: "1111",
          statusInfo: 111,
          products_arr: [
            {
              title: "111",
              image: require("@/static/image/upload.png"),
              keyVals: "222",
              priceSale: 222,
              num: 1,
            },
          ],
        },
      ], //允许售后列表
      tabCurrent: 0,
      tabSelect: {
        title: "申请售后",
        value: 0,
        status: "",
      },
      tabList: [
        {
          title: "申请售后",
          value: 0,
          status: "",
        },
        {
          title: "处理中",
          value: 1,
          status: 0,
        },
        {
          title: "已完成",
          value: 2,
          status: 1,
        },
        {
          title: "已驳回",
          value: 3,
          status: -1,
        },
      ],
    };
  },
  computed: {},
  filters: {},
  onLoad(option) {},
  onShow() {
    //this.initQuery();
    //this.setView();
  },
  onHide() {},
  onPullDownRefresh() {},
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    loadMore() {
      if (this.loadmore_status == "loadmore") {
        this.loadmore_status = "loading";
        this.pagination.page++;
        this.query_order();
      }
    },
    initQuery() {
      this.allow_refund_list = [];
      this.pagination.page = 1;
      this.loadmore_status = "loadmore";
    },
    setView() {
      this.query_order();
    },

    query_order() {
      if (this.tabSelect.value == 0) {
        //可售后列表
        this.query_allow_refund_list();
      } else {
        //售后服务列表
        this.query_refund_service_list();
      }
    },
    //可售后列表
    query_allow_refund_list() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "refund_afterSaleList",
          ...this.pagination,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.count = res.data.count;
          let list = res.data.list || [];

          this.format_refund_view_info(list);

          this.allow_refund_list = this.allow_refund_list.concat(list);
          this.loadmore_status =
            res.data.count > this.allow_refund_list.length
              ? "loadmore"
              : "nomore";
          this.$log("可售后列表", this.allow_refund_list);
        }
      });
    },

    //format_order_view_info
    format_refund_view_info(list) {
      list.forEach((v) => {
        v.products_arr = [v.products];
        // let status = v.status;
        // let status_info = v.status_info;
        v.is_allow_refund = v.ifRefund == 0; //
      });
    },
    toRefund(item) {
      this.toRoute({
        path: "/refund-type",
        query: {
          orderId: item.orderId,
          inventoryId: item.inventoryId,
        },
      });
    },

    //售后服务列表
    query_refund_service_list() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "refund_lists",
          ...this.pagination,
          status: this.tabSelect.status, //当前状态(0待处理 1已完成 )
        },
      }).then((res) => {
        if (res.code == 200) {
          this.count = res.data.count;
          // res.data.forEach(v => {
          // 	// v.count_down_pay_end_time = v.pay_end_time > 0 ? v.pay_end_time * 1000 : 0
          // 	this.handleOrderActions(v)
          // })
          this.allow_refund_list = res.data.list;
          this.format_refund_view_info(res.data.list);

          this.orders = this.orders.concat(res.data);
          this.loadmore_status =
            res.data.count > this.orders.length ? "loadmore" : "nomore";
        }
      });
    },
    tabClick(item) {
      this.tabSelect = item;
      this.initQuery();
      this.setView();
    },

    doCancel(item) {
      this.$refs.refund_cancel_pop.init(item);
    },

    openExpress(item) {
      this.$refs.refund_add_express_pop.init(item);
    },
    confirmExpress() {
      this.initQuery();
      this.setView();
    },

    qrShouHuo(item, index) {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "refund_qrShouHuo",
          id: item.id,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.initQuery();
          this.setView();
        }
      });
    },

    toDetail(item) {
      if (this.tabSelect.value == 0) {
        //订单详情
        this.toRoute({
          path: "/order-detail",
          query: {
            id: item.orderId,
          },
        });
      } else {
        //服务单详情
        this.toRoute({
          path: "/refund-service-detail",
          query: {
            id: item.id,
            type: item.type,
          },
        });
      }
    },

    // 更新订单信息
    update_refund_info(id) {
      this.initQuery();
      this.setView();

      // 	let index = this.orders.findIndex(v => v.id == id)
      // 	let item = this.orders[index];

      // 	if (this.tabSelect.value != 0) { //不是全部订单
      // 		this.orders.splice(index, 1)
      // 		return
      // 	}

      // 	this.$api({
      // 		url: '/service.php',
      // 		method: 'get',
      // 		data: {
      // 			action: 'orders_detail',
      // 			id: id
      // 		},
      // 	}).then(res => {
      // 		if (res.code == 200) {
      // 			let data = res.data;

      // 			let new_item = {
      // 				...item,
      // 				ifCancel: data.ifCancel,
      // 				ifComment: data.ifComment,
      // 				ifCommented: data.ifCommented,
      // 				ifDel: data.ifDel,
      // 				ifHx: data.ifHx,
      // 				ifPay: data.ifPay,
      // 				ifReceive: data.ifReceive,
      // 				orderStatus: data.orderStatus,
      // 				statusInfo: data.statusInfo,
      // 			}

      // 			this.orders.splice(index, 1, new_item)
      // 		}
      // 	})
    },
  },
};
</script>
<style lang="scss">
page {
  background: #f8f8f8;
}
</style>
<style lang="scss" scoped>
// ::v-deep .tabs-wrap .u-tabs__wrapper__nav__item {
// 	padding: 0 8rpx;
// }
.page {
  .page-ctx {
    padding: 24rpx 32rpx;
  }
}

.head-tabs {
  // position: fixed;
  // z-index: 10;
  // top: 0;
  // left: 0;
  // right: 0;
  background: #fff;
}

.tabs-wrap {
  padding-top: 0;
  box-shadow: 0rpx -10rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
  background: #f6f6f6;
  background: #fff;
  border-bottom: 1rpx solid #eee;

  .tabs {
    .tab-item {
      height: 100rpx;
      line-height: 100rpx;
      position: relative;
      // padding: 25rpx 0;
      text-align: center;
      flex: 1;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;

      &.active {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;

        &::after {
          content: "";

          position: absolute;
          z-index: 2;
          bottom: 0;
          left: 50%;
          transform: translate(-50%);
          width: 40rpx;
          height: 6rpx;
          background: #44c4be;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
        }
      }
    }
  }
}

.order-wrap {
  .order-list {
    .item {
      margin-bottom: 24rpx;
      background: #ffffff;
      // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
      border-radius: 16rpx 16rpx 16rpx 16rpx;

      padding: 32rpx 24rpx;
      margin-bottom: 20rpx;
      background: #ffffff;

      .item-top {
        padding: 0 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;

        .order-sn {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }

        .status {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ff0000;
        }
      }

      .item-center {
        // border-top: 1rpx solid #eee;
      }

      .item-bottom {
        // border-top: 1rpx solid #eee;
        // padding: 20rpx 0;

        .total-box {
          text-align: right;

          .price {
            text-align: right;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }

        .btns {
          margin-top: 30rpx;
          flex: 1;
          justify-content: flex-end;
          overflow: hidden;
          flex-wrap: wrap;

          .btn {
            margin-left: 20rpx;
            padding: 0 24rpx;
            min-width: 146rpx;
            height: 64rpx;
            background: #f6f6f6;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-weight: 400;
            font-size: 24rpx;
            color: #333333;

            &.btn-detail {
            }

            &.btn-pay {
              background: #f49c0d;
              color: #ffffff;
            }

            &.btn-reviews {
            }

            &.btn-cancel {
            }
          }
        }
      }
    }
  }

  .products-wrap {
    padding: 0 0;

    .product-list {
      .product-item {
        padding: 32rpx 0;

        & + .product-item {
          border-top: 1rpx solid #eee;
        }

        .poster-box {
          width: 176rpx;
          height: 176rpx;
          border-radius: 8rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .info {
          flex: 1;
          overflow: hidden;
          padding-left: 24rpx;

          .title-box {
          }

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }

          .desc-box {
            margin-top: 4rpx;

            .desc {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #000;
            }
          }

          .price-box {
            margin-top: 18rpx;

            .price-info {
              font-weight: bold;
              font-size: 28rpx;
              color: #e23410;
            }

            .num {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #000000;
            }
          }
        }
      }
    }
  }
}
</style>
